<template>
    <div>
        <p>
            <button class="btn btn-white btn-default btn-round" @click="refresh()">
                <i class="ace-icon fa fa-refresh red"></i>
                刷新
            </button>
            &nbsp;
            <button class="btn btn-white btn-success btn-round" @click="openAddModal()">
                <i class="ace-icon fa fa-edit blue"></i>
                新增
            </button>
        </p>
        <div class="row">
            <div v-for="course in courses" class="col-md-4">
                <div class="thumbnail search-thumbnail">
                    <img style="width: 360px;height: 202px" @click="toChapter(course)" v-show="!course.image" class="media-object"
                         src="/static/image/demo-course.jpg"/>
                    <img style="width: 360px;height: 202px" @click="toChapter(course)" v-show="course.image" class="media-object"
                         v-bind:src="course.image"/>
                    <div class="caption">
                        <div class="clearfix" >
                            <label class="pull-left label label-primary info-label" @click="showSummary(course.summary)">
                					课程概述(点我)
              					</label>
                            <span class="pull-right label label-primary info-label">
                					{{COURSE_LEVEL | optionKV(course.level)}}
                            </span>
                            <span class="pull-right label label-primary info-label">
                					{{COURSE_CHARGE | optionKV(course.charge)}}
              					</span>
                            <span class="pull-right label label-primary info-label">
									{{COURSE_STATUS | optionKV(course.status)}}
					  			</span>
                        </div>

                        <h3 class="search-title center">
                            <a  @click="toChapter(course)" href="#" class="blue bolder">
                                {{course.name}}
                            </a>
                        </h3>
                        <div v-for="teacher in teachers.filter(t=>{return t.id===course.teacherId})" class="align-center profile-activity clearfix">
                            <div>
                                <img  v-show="!teacher.image"  src="/ace/assets/images/avatars/avatar5.png">
                                <img  v-show="teacher.image"  v-bind:src="teacher.image">
                                <a class="user" href="#" @click="showTeacher(teacher)"> {{teacher.name}} ({{teacher.position}})</a>
                                <br>
                            </div>
                        </div>
                        <p></p>
                      <p class="center" >
                        <span class="badge badge-danger">价格：<i class="fa fa-rmb"></i>&nbsp;{{course.price}}</span>
                        <!--                            <span class="badge badge-info">{{course.id}}</span>-->
                          <span class="badge badge-info">排序：{{course.sort}}</span>
                          <span class="badge badge-info">时长：{{course.time | formatSecond}}</span>
                          <span class="badge badge-info">报名数：{{course.enroll}}</span>
                        </p>
                        <p class="center" >
                            <button v-on:click="toChapter(course)" class="btn btn-white btn-xs btn-info btn-round">
                                大章
                            </button>&nbsp;
                            <button v-on:click="openContentModal(course)"
                                    class="btn btn-white btn-xs btn-info btn-round">
                                内容
                            </button>&nbsp;
                            <button v-on:click="openSortModal(course)" class="btn btn-white btn-xs btn-info btn-round">
                                排序
                            </button>&nbsp;
                            <button v-on:click="openEditModal(course.id)"
                                    class="btn btn-white btn-xs btn-info btn-round">
                                编辑
                            </button>&nbsp;
                            <button v-on:click="deleteById(course.id)"
                                    class="btn btn-white btn-xs btn-warning btn-round">
                                删除
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页组件 -->
        <pagination ref="pagination" v-bind:list="list" v-bind:size="3"></pagination>

        <!-- 新增/修改模态框 -->
        <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="border-color: #aa160e;background-color: lightblue">
                    <div class="modal-header">
                        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title grey bolder" style="font-family: 'Courier New', Courier, monospace"
                            id="myModalLabel">{{modalTitle}}</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">
                                    分类
                                </label>
                                <div class="col-sm-10">
                                    <ul id="tree" class="ztree"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">封面</label>
                                <div class="col-sm-10">
                                    <BigFile     v-bind:inputId="'image-upload'"
                                              v-bind:text="'上传封面'"
                                              v-bind:suffixs="['jpg', 'jpeg', 'png']"
                                              v-bind:use="FILE_USE.COURSE.key"
                                              v-bind:afterUpload="afterUpload">

                                    </BigFile>
                                    <div v-show="course.image" class="row">
                                        <div class="col-md-4">
                                            <img v-bind:src="course.image" class="img-responsive">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称</label>
                                <div class="col-sm-10">
                                    <input v-model="course.name" placeholder="课程名称" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">讲师</label>
                                <div class="col-sm-10">
                                    <select v-model="course.teacherId" class="form-control">
                                        <option v-for="o in teachers" v-bind:value="o.id">{{o.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">概述</label>
                                <div class="col-sm-10">
                                    <textarea v-model="course.summary" placeholder="请简单描述一下课程......" class="form-control"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">价格（元）</label>
                                <div class="col-sm-10">
                                    <input v-model="course.price" placeholder="如:10 表示10元" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">级别</label>
                                <div class="col-sm-10">
                                    <select v-model="course.level" class="form-control">
                                        <option v-for="o in COURSE_LEVEL" v-bind:value="o.key">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">收费</label>
                                <div class="col-sm-10">
                                    <select v-model="course.charge" class="form-control">
                                        <option v-for="o in COURSE_CHARGE" v-bind:value="o.key">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">状态</label>
                                <div class="col-sm-10">
                                    <select v-model="course.status" class="form-control">
                                        <option v-for="o in COURSE_STATUS" v-bind:value="o.key">{{o.value}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">报名数</label>
                                <div class="col-sm-10">
                                    <input v-model="course.enroll" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">顺序</label>
                                <div class="col-sm-10">
                                    <input v-model="course.sort" disabled class="form-control">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-round"
                                style="font-family: 'Courier New', Courier, monospace" data-dismiss="modal">
                            关闭
                        </button>
                        <button @click="save()" type="button" class="btn btn-primary btn-round"
                                style="font-family: 'Courier New', Courier, monospace">
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!--排序模态框-->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border-color: #aa160e;background-color: lightskyblue">
                        <!--                        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span-->
                        <!--                                aria-hidden="true">&times;</span></button>-->
                        <h4 class="modal-title grey bolder center"
                            style="font-family: 'Courier New', Courier, monospace"
                        >排序</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-lg-3">
                                    当前排序
                                </label>
                                <div class="col-lg-8">
                                    <input class="form-control" v-model="sort.oldSort" name="oldSort" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-lg-3">
                                    新排序
                                </label>
                                <div class="col-lg-8">
                                    <input oninput = "value=value.replace(/[^\d]/g,'')"  class="form-control" v-model="sort.newSort" name="newSort">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-round"
                                 data-dismiss="modal">
                            关闭
                        </button>
                        <button @click="updateSort()" type="button" class="btn btn-primary btn-round"
                                >
                            保存
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!--显示教师模态框-->
        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border-color: #aa160e;background-color: lightskyblue">
                        <h4 class="modal-title grey bolder center"
                            style="font-family: 'Courier New', Courier, monospace"
                        >教师信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="center">
                            <span class="profile-picture">
					        <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty"
                                src="/static/image/讲师头像/头像1.jpg" v-bind:title="teacher.intro"/>
					        <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty"
                                v-bind:src="teacher.image" v-bind:title="teacher.intro"/>
				            </span>

                            <div class="space-4"></div>

                            <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
                                <div class="inline position-relative">
                                    <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                                        <i class="ace-icon fa fa-circle light-green"></i>
                                        &nbsp;
                                        <span class="white">{{teacher.position}}</span>
                                    </a>
                                </div>
                            </div>
                            <div class="space-6"></div>

                           <div class="text-center">
                                 <a href="javascript:;" class="text-info bigger-110" v-bind:title="teacher.motto">
                                    <i class="ace-icon fa fa-user"></i>
                                    {{teacher.name}}【{{teacher.nickname}}】
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--显示概述模态框-->
        <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="border-color: #aa160e;background-color: lightskyblue">
                        <h4 class="modal-title grey bolder center"
                        >课程概述</h4>
                    </div>
                    <div class="modal-body">
                        <div class="center">

                            <div class="space-4"></div>
                            <p class="lead bolder red responsive" style="font-family: '楷体', '楷体_GB2312'">
                                {{summary}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import Pagination from "../../components/pagination.vue"
    import BigFile from "../../components/big-file.vue"

    export default {
        name: "course",
        components: {
            BigFile,
            Pagination
        },
        data: function () {
            return {
                courses: [],
                course: {},
                modalTitleArr: {
                    insert: "新增课程",
                    update: "修改课程"
                },
                modalTitle: "",
                COURSE_LEVEL: COURSE_LEVEL,
                COURSE_CHARGE: COURSE_CHARGE,
                COURSE_STATUS: COURSE_STATUS,
                tree: {},
                categorys: [],
                sort: {},
                teachers:[],
                teacher:{},
                FILE_USE:FILE_USE,
                summary:""
            }
        },
        mounted: function () {
            // this.$parent.activeSidebar("business-course-sidebar")
            let _this = this;
            _this.list();
            _this.allCategory();
            //获取老师
            _this.getAllTeacher();
        },
        methods: {
            /*展示课程概述模态框*/
            showSummary(summary){
                let _this = this;
                _this.summary = summary;
                $("#myModal4").modal("show");
            },
            /*上传文件之后*/
            afterUpload(data) {
                let _this = this;
                _this.course.image = data.data.path;
            },
            /*打开教师模态框*/
            showTeacher(teacher){
                let _this = this;
                _this.teacher = teacher;
                $("#myModal3").modal("show");
            },
            /*打开排序*/
            openSortModal(course) {
                let _this = this;
                _this.sort = {
                    courseId: course.id,
                    oldSort: course.sort,
                    newSort: course.sort
                };
                $("#myModal2").modal({backdrop: 'static'});
                $("#myModal2").modal("show");
            },

            /*更新排序*/
            updateSort() {
                let _this = this;
                if (_this.sort.newSort === _this.sort.oldSort) {
                    Toast.warning("排序没有变化");
                    return;
                }
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/sort', _this.sort).then((response) => {
                    Loading.hide();
                    if (response.data.success) {
                        Toast.success(response.data.message);
                        $("#myModal2").modal("hide");
                        _this.list();
                    } else {
                        Toast.error(response.data.message);
                    }

                });

            },

            /*打开内容*/
            openContentModal(course) {
                let _this = this;
                SessionStorage.set(SESSION_KEY_COURSE, course);
                _this.$router.push("/business/content")
            },

            /* 打开新增模态框 */
            openAddModal() {
                let _this = this;
                _this.clearCourse();
                _this.course.sort = _this.$refs.pagination.total + 1;
                _this.modalTitle = _this.modalTitleArr.insert;
                _this.tree.checkAllNodes(false);
                _this.tree.expandAll(false);
                $("#myModal1").modal({backdrop: 'static'});
                $("#myModal1").modal("show");

            },
            /*打开编辑模态框*/
            openEditModal(id) {
                let _this = this;
                _this.clearCourse();
                _this.modalTitle = _this.modalTitleArr.update;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/course/findById/' + id).then((response) => {
                    _this.course = response.data.data;
                    //初始化分类
                    _this.tree.checkAllNodes(false);
                    //获取课程下的分类IDS
                    let ids = _this.course.categorys;
                    for (let i = 0; i < ids.length; i++) {
                        let node = _this.tree.getNodeByParam("id", ids[i]);
                        _this.tree.checkNode(node, true);
                    }
                    _this.tree.expandAll(false);
                });
                $("#myModal1").modal({backdrop: 'static'});
                $("#myModal1").modal("show");
            },
            refresh() {
                let _this = this;
                Loading.show();
                _this.list(_this.$refs.pagination.page);
                Loading.hide();
            },
            /* 查找课程 */
            list(page = 1) {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/list', {
                    page: page,
                    size: _this.$refs.pagination.size
                }).then((response) => {
                    _this.courses = response.data.data.list;
                    _this.$refs.pagination.render(page, response.data.data.total);
                })
            },
            /*保存课程信息到后台*/
            save() {
                let _this = this;
                //获取分类id到arr
                let obj = _this.tree.getCheckedNodes();
                let arr = [];
                for (let i = 0; i < obj.length; i++) {
                    arr.push(obj[i].id);
                }
                console.log(arr);
                _this.course.categorys = arr;
                if (!_this.course.id) {
                    /*不存在id为新增*/
                    _this.insert();
                } else {
                    /*存在id为修改*/
                    _this.update();
                }
            },
            /*新增课程*/
            insert() {
                let _this = this;
                /*新增校验*/
                /*if (!Validator.require(_this.course.name, "名称")
                    || !Validator.require(_this.course.courseId, "课程")
                    || !Validator.length(_this.course.courseId, "课程ID", 1, 19)) {
                    return;
                }*/
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/course/save', _this.course).then((response) => {
                    console.log(response);
                    if (response.data.success) {
                        _this.list(_this.$refs.pagination.page);
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal1").modal("hide");
                });
            },
            /*修改课程*/
            update() {
                let _this = this;
                /*更新校验*/
                /*if (!Validator.require(_this.course.name, "名称")
                    && !Validator.require(_this.course.courseId, "课程")
                    || !Validator.length(_this.course.courseId, "课程ID", 1, 19)) {
                    return;
                }*/
                _this.$ajax.put(process.env.VUE_APP_SERVER + '/business/admin/course/update', _this.course).then((response) => {
                    if (response.data.success) {
                        _this.list(_this.$refs.pagination.page);
                        Toast.success(response.data.message);
                    } else {
                        Toast.error(response.data.message);
                    }
                    $("#myModal1").modal("hide");
                })
            },
            /*删除课程*/
            deleteById(id) {
                let _this = this;
                /*删除提示框*/
                Confirm.show("", () => {
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/course/deleteById/' + id).then((response) => {
                        if (response.data.success) {
                            _this.list(_this.$refs.pagination.page);
                            Toast.success(response.data.message);
                        } else {
                            Toast.error(response.data.message);
                        }
                        $("#myModal1").modal("hide");
                    })
                });
            },
            /*清空模态框的数据*/
            clearCourse() {
                let _this = this;
                _this.course = {name: "", courseId: "", id: ""};
                _this.modalTitle = "";
            },

            /*跳转到大章*/
            toChapter(course) {
                let _this = this;
                SessionStorage.set(SESSION_KEY_COURSE, course);
                _this.$router.push("/business/chapter");

            },
            /*查找所有分类*/
            allCategory() {
                let _this = this;
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/category/all').then((response) => {
                    Loading.hide();
                    let resp = response.data;
                    _this.categorys = resp.data;
                    _this.initTree();
                })
            },


            /*初始化ztree*/
            initTree() {
                let _this = this;
                let setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            idKey: "id",
                            pIdKey: "parent",
                            rootPId: "00000000",
                            enable: true
                        }
                    }
                };

                let zNodes = _this.categorys;

                _this.tree = $.fn.zTree.init($("#tree"), setting, zNodes);
                // 展开所有的节点
                // _this.tree.expandAll(true);
            },
            /*查找所有的讲师*/
            getAllTeacher(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/teacher/all').then((response) => {
                    _this.teachers = response.data.data;
                });
            }
        }
    }
</script>
<style scoped>
    .caption h3 {
        font-size: 20px;
    }

    @media (max-width: 1199px) {
        .caption h3 {
            font-size: 16px;
        }
    }
</style>
